<template>
  <div class="notifications-container">
    <div class="page-header">
      <h2 class="page-title">消息通知</h2>
      <div class="header-right">
        <div class="current-time">{{ currentTime.toLocaleTimeString() }}</div>
        <el-button-group>
          <el-button
            :type="showUnread ? 'primary' : 'default'"
            @click="showUnread = true"
          >未读消息</el-button>
          <el-button
            :type="!showUnread ? 'primary' : 'default'"
            @click="showUnread = false"
          >全部消息</el-button>
        </el-button-group>
      </div>
    </div>

    <transition-group
      name="notification-list"
      tag="div"
      class="notification-list"
    >
      <div
        v-for="notification in filteredNotifications"
        :key="notification.id"
        class="notification-card"
        :class="{ 'unread': notification.status===0 }"
        @click="markAsRead(notification)"
      >
        <div class="notification-icon">
          <i :class="getNotificationIcon(notification.type)"></i>
        </div>
        <div class="notification-content">
          <div class="notification-header">
            <h3 class="notification-title">{{ notification.title }}</h3>
            <span class="notification-time">{{ notification.createTime }}</span>
          </div>
          <p class="notification-text">{{ notification.content }}</p>
          <div class="notification-actions" v-if="notification.status===0">
            <el-button type="text"  size="small">标记已读</el-button>
            <!--            <el-button type="text" size="small" v-if="notification.actionable">立即处理</el-button>-->
          </div>
        </div>
      </div>
    </transition-group>

    <div v-if="filteredNotifications.length === 0" class="empty-state">
      <i class="el-icon-message"></i>
      <p>{{ showUnread ? '没有未读消息' : '暂无消息' }}</p>
    </div>
  </div>
</template>

<script>
import {getAllNotification, updateStatus} from "@/api/reunion/notification";

export default {
  name: 'Notifications',
  data() {
    return {
      showUnread: true,
      notifications: [],
      timer: null,
      currentTime: new Date()
    }
  },
  computed: {
    filteredNotifications() {
      return this.showUnread
        ? this.notifications.filter(n => n.status===0)
        : this.notifications
    }
  },
  created() {
    this.getAllNotification()
    this.updateTime()
    this.timer = setInterval(() => {
      this.updateTime()
    }, 1000)
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    updateStatus(id){
      updateStatus(id).then(res => {
        if (res.code === 200){
          this.getAllNotification()
        }
      })
    },
    getAllNotification(){
      getAllNotification().then(res => {
        this.notifications = res.data

      })
    },
    getNotificationIcon(type) {
      const icons = {
        system: 'el-icon-info',
        reservation: 'el-icon-date',
        activity: 'el-icon-bell'
      }
      return icons[type] || 'el-icon-message'
    },
    markAsRead(notification) {
      if (notification.status===0) {
        // notification.read = true
        this.updateStatus(notification.id)
        this.$message({
          message: '已标记为已读',
          type: 'success',
          duration: 1500
        })
      }
    },

    updateTime() {
      this.currentTime = new Date()
    }
  }
}
</script>

<style lang="scss" scoped>
.notifications-container {
  animation: fadeIn 0.5s ease-out;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  .page-title {
    font-size: 24px;
    font-weight: 500;
    color: #2c3e50;
    margin: 0;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .current-time {
    font-size: 14px;
    color: #606266;
    background: #f5f7fa;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
  }
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notification-card {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  &.unread {
    border-left: 4px solid #409EFF;
    background: #ecf5ff;

    .notification-title {
      font-weight: 600;
    }
  }

  .notification-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;

    i {
      font-size: 20px;
      color: #409EFF;
    }
  }

  .notification-content {
    flex: 1;

    .notification-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .notification-title {
        margin: 0;
        font-size: 16px;
        color: #2c3e50;
      }

      .notification-time {
        font-size: 12px;
        color: #909399;
      }
    }

    .notification-text {
      margin: 0 0 12px;
      font-size: 14px;
      color: #606266;
      line-height: 1.6;
    }

    .notification-actions {
      display: flex;
      gap: 16px;

      .el-button {
        padding: 0;

        &:first-child {
          color: #409EFF;
        }

        &:last-child {
          color: #67C23A;
        }
      }
    }
  }
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #909399;

  i {
    font-size: 48px;
    margin-bottom: 16px;
  }

  p {
    margin: 0;
    font-size: 16px;
  }
}

// 列表动画
.notification-list-enter-active,
.notification-list-leave-active {
  transition: all 0.5s ease;
}

.notification-list-enter,
.notification-list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

// 页面动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
